<template>
  <div>
    <!-- 列表页面 -->
    <div class="container" v-if="showType === 'listPage'">
      <div class="header">
        <div class="title">题目分类列表</div>
      </div>
      <div class="addType">
        <el-button type="success" round @click="handleAdd">添加分类</el-button>
      </div>
      <!-- 表格 -->
      <el-table :data="tableData" stripe>
        <el-table-column prop="id" label="id" width="520"></el-table-column>
        <el-table-column prop="asw_type_name" label="名称" width="450"></el-table-column>
        <el-table-column property="asw_type_sort" width="220" label="排序"> </el-table-column>
        <el-table-column prop="asw_type_state" label="是否上架" width="220">
          <template #default="scope">
            <el-switch v-model="scope.row.asw_type_state" :active-value="1" :inactive-value="0" active-color="0"
              inactive-color="1" @change="switchReceiveStatus($event,scope.row)">
            </el-switch>
          </template>
        </el-table-column>

        <el-table-column label="操作" width="170">
          <template #default="scope">
            <el-button v-for="(item, index) in operate" :type="item.type" plain size="mini" :key="index"
              @click.native.prevent.stop="buttonMethods(item.func, scope.$index, scope.row)">{{ item.name }}</el-button>
          </template>
               <!-- <template #default="scope">
                    <el-button v-for="(item, index) in operate" :type="item.type" plain size="mini" :key="index">{{ item.name }}</el-button>
            <el-button plain size="small" type="primary" @click="handleEdit2(scope.row.id)">编辑</el-button>
            <el-button plain size="small" type="danger" @click="handleDelete2(scope.row.id)"
              v-permission="{ permission: '删除图书', type: 'disabled' }"
              >删除</el-button
            >
          </template> -->
        </el-table-column>
      </el-table>
    </div>
    <!-- 添加页面 -->
    <type-add v-else-if="showType === 'addPage'" @addClose="addClose"></type-add>
    <!-- 编辑页面 -->
    <type-modify v-else-if="showType === 'editPage'" @editClose="editClose" :editTypeID="editTypeID"></type-modify>
  </div>
</template>

<script>
import asw from '@/model/problem.js'
import TypeAdd from './type-add.vue'
import TypeModify from './type-modify.vue'


export default {
  components: {
    TypeAdd,
    TypeModify
  },
  data() {
    return {
      value: true,
      tableData: [],
      operate: [],
      showType: 'listPage',
      editTypeID:''
    }
  },
  async created() {
    this.loading = true
    await this.getAswTypes()
    this.operate = [{
      name: '编辑',
      func: 'handleEdit',
      type: 'primary'
    },
    {
      name: '删除',
      func: 'handleDelete',
      type: 'danger',
      permission: '删除分类',
    },
    ]
    this.loading = false
  },
  methods: {
    // 操作列
    buttonMethods(func, index, row) {
      const self = this
      const {
        methods
      } = this.$options
      methods[func](self, index, row)
    },
    handleEdit(self, index, row) {
      self.showType = 'editPage'
      self.editTypeID = row.id
    },
    handleEdit2(id){
      this.showType = 'editPage'
      this.editTypeID = id
    },
    handleDelete(self, index, val) {
      console.log(val)
      self
        .$confirm('此操作将永久删除该分类信息, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        })
        .then(async () => {
          const res = await asw.deleteAswType(val.id)
          if (res.code < window.MAX_SUCCESS_CODE) {
            self.getAswTypes()
            self.$message({
              type: 'success',
              message: `${res.message}`,
            })
          }
        })
    },
     handleDelete2(id) {
      this.$confirm('此操作将永久删除该分类信息, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        })
        .then(async () => {
          const res = await asw.deleteAswType(id)
          if (res.code < window.MAX_SUCCESS_CODE) {
            this.getAswTypes()
            this.$message({
              type: 'success',
              message: `${res.message}`,
            })
          }
        })
    },

    // 查看所有分类
    async getAswTypes() {
      try {
        const aswTypes = await asw.getAswTypes()
        this.tableData = aswTypes
      } catch (error) {
        if (error.code === 10020) {
          this.tableData = []
        }
      }
    },
    handleAdd() {
      this.showType = 'addPage'
    },
    addClose() {
      this.showType = 'listPage'
      this.getAswTypes()
    },
    editClose() {
      this.showType = 'listPage'
      this.getAswTypes()
    },
    async switchReceiveStatus(val, row) {
      const tempStatus = row.asw_type_state === 0 ? 1 : 0
      const params = {}
      params.tempStatus = row.asw_type_state
      params.id = row.id
      const res = await asw.updateState(params)
      console.log(res)
      if (res) {
        this.$message.success('修改状态成功')
        this.getAswTypes()
      } else {
        // 重置switch 变回原来的状态
        row[val] = tempStatus
        this.$message.error('修改状态失败')
      }
    }
  },
}
</script>

<style lang="scss" scoped>
  .container {
    padding: 0 30px;

    .header {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .title {
        height: 59px;
        line-height: 59px;
        color: $parent-title-color;
        font-size: 16px;
        font-weight: 500;
      }
    }

    .pagination {
      display: flex;
      justify-content: flex-end;
      margin: 20px;
    }
  }

  .addType {
    padding-bottom: 10px;
  }
</style>
